<!DOCTYPE html>
<html>
<head>
    <title>碰撞</title>
    <script src="./JS/Vector2.js" type="text/javascript"></script>
</head>
<body>
    <canvas id="canvas" width="600" height="400">Your browser not support canvas!</canvas>

<script type="text/javascript">


//    Vector2 = function(x,y){
//        this.x = x||0;
//        this.y = y||0;
//    };
//
//    Vector2.prototype = {
//        constructor:Vector2,
//        multiplyScalar:function(s){
//            this.x *= s;
//            this.y *= s;
//            return this;
//        },
//        divideScalar:function(s){
//            if(s){
//                this.x /= s;
//                this.y /= s;
//            }
//            else{
//                return this.set(0,0);
//            }
//            return this;
//        },
//        dot:function(v){
//            return this.x*v.x + this.y*v.y;
//        },
//        lengthSq:function(){
//            return this.x*this.x + this.y*this.y;
//        },
//        length:function(){
//            return Math.sqrt(this.lengthSq());
//        },
//        normalize:function(){
//            return this.divideScalar(this.length());
//        },
//        //把向量v当作是法向量，折射过去
//        reflectionSelf:function(v){
//            var nv = v.normalize();
//            this.subSelf(nv.multiplyScalar(2*this.dot(nv)));
//        },
//        //减去向量v
//        subSelf:function(v){
//            this.x -= v.x;
//            this.y -= v.y;
//            return this;
//        },
//        //加上向量v
//        addSelf:function(v){
//            this.x += v.x;
//            this.y += v.y;
//            return this;
//        },
//        printSelf:function(){
//            console.log("Vector.x:" + this.x + "|Vector.y:" + this.y);
//        },
//        //垂直向量
//        vertical:function(){
//            return new Vector2(-this.y,this.x);
//        },
//        //点的方法
//        //点到由p1、p2确定的直线上的距离
//        distanceToLine:function(p1,p2){
//            if(p2.x === p1.x){
//                return Math.abs(this.y - p1.y);
//            }
//            else if(p2.y === p1.y){
//                return Math.abs(this.x - p1.x);
//            }
//            else{
//                var A = (p2.y - p1.y)/(p2.x - p1.x);
//                var B = -1;
//                var C = p1.y - A*p1.x;
//                return Math.abs(A*this.x + B*this.y +C)/Math.sqrt(A*A + B*B);
//            }
//        }
//    };

//    var v1 = new Vector2(5,5);
//    var v2 = new Vector2(10,20);

//    console.log("length:" + v1.lengthSq());
//    //v1.addSelf(v2);
//    v1.reflectionSelf(v2);
//    v1.printSelf();
//    console.log("length:" + v1.lengthSq());

    function getRandomNumber(min,max){
        return (min + Math.floor(Math.random()*(max - min +1)));
    }

    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");

    ctx.fillStyle = "#030303";
//    ctx.fillStyle = "red";
    ctx.fillRect(0,0,c.width,c.height);

    var balls = [];
    for(var i=0;i<10;i++){
        var ball = {
            position:new Vector2(250,200),
            r:getRandomNumber(5,20),
            v:new Vector2(getRandomNumber(-200,200),getRandomNumber(-200,200))
        };
        balls.push(ball);
    }

    var cycle = 100;
    var s = setInterval(function(){
        ctx.fillStyle = "rgba(0,0,0,.3)";
        ctx.fillRect(0,0,c.width,c.height);

        var p1 = new Vector2(0,100);
        var p2 = new Vector2(300,0);
        var p3 = new Vector2(600,100);

        var p4 = new Vector2(0,300);
        var p5 = new Vector2(300,400);
        var p6 = new Vector2(600,300);

        ctx.strokeStyle = "#fff";
        ctx.moveTo(p1.x,p1.y);
        ctx.lineTo(p2.x,p2.y);
        ctx.lineTo(p3.x,p3.y);
        ctx.moveTo(p4.x,p4.y);
        ctx.lineTo(p5.x,p5.y);
        ctx.lineTo(p6.x,p6.y);
        ctx.stroke();

        ctx.fillStyle = "#fff";

        for(var i in balls){
            ctx.beginPath();
            ctx.arc(balls[i].position.x,balls[i].position.y,balls[i].r,0,Math.PI*2,true);
            ctx.closePath();
            ctx.fill();
            //球是否与左右碰撞
            if(balls[i].r + balls[i].position.x > c.width || balls[i].position.x - balls[i].r < 0){
                balls[i].v.reflectionSelf(new Vector2(1,0));
            }
            //球是否与上下碰撞
            if(balls[i].r + balls[i].position.y > c.height || balls[i].position.y - balls[i].r < 0){
                balls[i].v.reflectionSelf(new Vector2(0,1));
            }
            //球是否与p1 p2直线碰撞
            if(balls[i].position.distanceToLine(p1,p2) <= balls[i].r){
                balls[i].v.reflectionSelf(new Vector2(p1.x - p2.x,p1.y - p2.y).vertical());
            }

            //球是否与p3 p2直线碰撞
            if(balls[i].position.distanceToLine(p2,p3) <= balls[i].r){
                balls[i].v.reflectionSelf(new Vector2(p3.x - p2.x,p3.y - p2.y).vertical());
            }

            balls[i].position.x += balls[i].v.x*cycle/1000;
            balls[i].position.y += balls[i].v.y*cycle/1000;
        }
    },cycle);

</script>
</body>
</html>